import {useRef, forwardRef, useImperativeHandle} from "react";

const  Child  =  forwardRef(function(props,ref){
     useImperativeHandle(ref ,()=> ({
        handlerClick: ()=> {
            console.log('子组件')
        }
     })
    )

    return (
        <div>子组件</div>
    )
})

export default function Ref() { 
    const childRef = useRef()
    
    function handlerClick(){
      childRef.current.handlerClick()
    }

    return (
        <>  
         <Child  ref={childRef}></Child>
        <button onClick={handlerClick}>操作</button>
        </>
    );
}